<template lang="pug">
  kalix-master
    div
      article
        div.art1
          div.art1_left(@mouseleave="leaveAll()")
            ul
              li(v-for="(item,index) in depData" :key="item.index" @mouseenter="twoShow(index)" @mouseleave="")
                a.acolor {{item.content}}
            div.erjiBox-l(v-if="twoIsShow" )
              div.erjiTitle {{depData[twoIndex].content}}
              div.erjiLine
              div.erjiContent
                div(v-for="(item2,index) in depData[twoIndex].children" :key="item2.index" @mouseenter="threeShow(index,item2)").erjiCss
                  router-link(v-bind:to="{name: 'SearchPage',params: {name:item2.content}}") {{item2.content}}
            div.erjiBox-r(v-if="threeIsShow" @mouseleave="threeleave()")
              div.erjiTitle {{depData[twoIndex].children[threeIndex].content}}
              div.erjiLine
              div.erjiContent
                router-link(v-bind:to="{name: 'SearchPage',params: {name:item3.content}}" v-for="(item3,index) in depData[twoIndex].children[threeIndex].children" :key="item3.index") {{item3.content}}
          div.art1_right
            div.slider-show
              slider(:slides="slides" :time="invTime")
        div.zonghe
          div.zonghe-left
            div.paihang
              span.tuijian 课程
              span 排行
            div.titleFa
              span.titleFaNa 课程名称
              span.titleFaSk 授课教师
              span.titleFaKs 课时
              span.titleFaXf 学分
              span.titleFaXx 学习人数
            div.paihangbang
              ul
                li(v-for="(cv,index) in CVData")
                  div.paihangbangTitle(@click="details(cv)")
                    p.length(:class="addclass(index)") {{index + 1}}
                    a(href="#")  {{cv.name}}
                  <!--span.huise  {{cv.uname}}-->
                  router-link(v-bind:to="{name: 'Teacher',params:{uid:cv.uid}}").huise.shi  {{cv.uname}}
                  span.huise  {{cv.classHour}}
                  span.xuefen  {{cv.credit}}
                  span.renshu  {{cv.hits}}
          div.zonghe-right
            div.kecheng
              span.tuijian 热门
              span 课程
            div.remen
              div.remen1(@click="details(cv)")
                router-link(:to="{path:'/videopage/'+CVDataOne.id}")
                  <!--img(src="/static/Index/u357.png")-->
                  img(:src="CVDataOne.photo")
                  a.mingcheng(href="#") {{CVDataOne.name}}
                span
                  img(src="/static/Index/u365.svg")
              div.remen2.clearfix
                router-link.remen2-1(:to="{path:'/videopage/'+CVDataTwo.id}")
                  img(:src="CVDataTwo.photo")
                  a.mingcheng(href="#") {{CVDataTwo.name}}
                router-link.remen2-2(:to="{path:'/videopage/'+CVDataThree.id}")
                  img(:src="CVDataThree.photo")
                  a.mingcheng(href="#") {{CVDataThree.name}}
        //推荐课程
        div.tuijian-box
          div.kecheng
            span.tuijian 推荐
            span 课程
          div.recommended
            div.img-1
              router-link(:to="{path:'/videopage/'+hcDataone.cid}")
                img(:src="hcDataone.photo")
                span.img-title {{hcDataone.gname}}
              div.course
                p
                  router-link(:to="{path:'/videopage/'+hcDataone.cid}").course-name 课程名称 {{hcDataone.cname}}
                p
                  span.course-jianjie 授课教师 {{hcDataone.uname}} &nbsp; &nbsp; 课时 {{hcDataone.classHour}} &nbsp; &nbsp; 学分 {{hcDataone.credit}} &nbsp; &nbsp;
                p
                  router-link(:to="{path:'/videopage/'+hcDataone.cid}").course-jianjie 课程简介 {{hcDataone.introduction}}
            div.img-2
              router-link(:to="{path:'/videopage/'+hcDatatwo.cid}")
                img(:src="hcDatatwo.photo")
                span.img-title {{hcDatatwo.gname}}
                div.courses
                  p
                    a(href="#").courses-name 课程名称 {{hcDatatwo.cname}}
                  p
                    span.courses-jianjie 授课教师 {{hcDatatwo.uname}} &nbsp; &nbsp; 课时 {{hcDatatwo.classHour}} &nbsp; &nbsp; 学分 {{hcDatatwo.credit}} &nbsp; &nbsp;
                  p
                    a(href="#").courses-jianjie 课程简介 {{hcDatatwo.introduction}}
            div.img-2
              router-link(:to="{path:'/videopage/'+hcDatathree.cid}")
                img(:src="hcDatathree.photo")
                span.img-title {{hcDatathree.gname}}
                div.courses
                  p
                    a(href="#").courses-name 课程名称 {{hcDatathree.cname}}
                  p
                    span.courses-jianjie 授课教师 {{hcDatathree.uname}} &nbsp; &nbsp; 课时 {{hcDatathree.classHour}} &nbsp; &nbsp; 学分 {{hcDatathree.credit}} &nbsp; &nbsp;
                  p
                    a(href="#").courses-jianjie 课程简介 {{hcDatathree.introduction}}
        //精品
        div.boutique
          div.kecheng
            span.tuijian 精选
            span 课程
          div.boutique-left
            div.boutique-son
              router-link(:to="{path:'/videopage/'+scDataOne.cid}")
                img(:src="scDataOne.photo")
              span.boutique-sk {{scDataOne.uname}}
              span.boutique-ks {{scDataOne.classHour}}
              span.boutique-xf {{scDataOne.credit}}
              span.boutique-jp 精品
          div.boutique-right
            p.boutique-right-name {{scDataOne.cname}}
            p
              span 授课教师: {{scDataOne.uname}}&nbsp; &nbsp;
              span 课时: {{scDataOne.classHour}} &nbsp; &nbsp;
              span 学分: {{scDataOne.credit}}
            p 课程简介: {{scDataOne.introduction}}
            p 课程要点: {{scDataOne.points}}
        //精选课程
        div.jingxuan-box
          div.select
            ul
              li(v-for="sc in scData" v-if="sc.identify > 1")
                router-link.select-video(:to="{path:'/videopage/'+sc.cid}")
                  img(:src="sc.photo")
                  span.pingfen {{sc.credit}}
                a.select-name(href="#") {{sc.cname}}
      div.slicer
      article
        div.teacher
          div.teacher-left
            div.teacher-title
              span.green 热门
              span 教师
            ul.teacher-ul
              li.teacher-li(v-for="hot in hotTeaData")
                div.teacher-head
                  div.teacher-box
                    div.teacher-son
                      img(:src="hot.icon")
                      p {{hot.name}}
          div.teacher-right
            div.teacher-title
              span.green 推荐
              span 教师
            div.kecheng-name1(v-for="ht in htData")
              router-link(v-bind:to="{name: 'Teacher',params:{uid: ht.uid}}")
                div.kecheng-img.clearfix
                  img(:src="ht.icon")
                div.kecheng-right
                  p.tt 课程名称 {{ht.uname}}
                  p.tt {{ht.uname}}
                  span.tt 课时 {{ht.uname}}
                  span.tt 学分 {{ht.uname}}
                div.clear
</template>

<script type="text/ecmascript-6">
  import Login from 'api/login'
  import {mapMutations} from 'vuex'
  import Slider from '../../components/Layout/Slider'

  export default {
    components: {Slider},
    data() {
      return {
        invTime: 5000,
        slides: [],
        twoIndex: 0,
        threeIndex: 0,
        twoIsShow: false,
        threeIsShow: false,
        depData: [],
        hcDataone: [],
        hcDatatwo: [],
        hcDatathree: [],
        CVData: [],
        CVDataOne: [],
        CVDataTwo: [],
        CVDataThree: [],
        // htDatathree: [],
        htData: [],
        scData: [],
        scDataOne: [],
        hotTeaData: []
      }
    },
    mounted() {
      this.runFunction(0)
    },
    methods: {
      ...mapMutations({
        setAccessToken: 'setAccessToken'
      }),
      twoShow(index) {
        this.twoIsShow = true
        this.threeIsShow = false
        this.twoIndex = index
        this.threeIndex = 0
      },
      threeShow(index, value) {
        if (value.children.length > 0) {
          this.threeIsShow = true
        } else {
          this.threeIsShow = false
        }
        this.threeIndex = index
      },
      threeleave() {
        // this.twoIsShow = false
        this.threeIsShow = false
      },
      leaveAll() {
        this.twoIsShow = false
        this.threeIsShow = false
      },
      addclass(i) {
        switch (i) {
          case 0:
            return 'diyi'
          case 1:
            return 'dier'
          case 2:
            return 'disan'
        }
      },
      runFunction(_nextIndex) {
        let funNames = ['autoLogin', 'getImgAll', 'getAllDep', 'getHotlistsAll', 'getCourseAll']
        setTimeout(() => {
          if (_nextIndex < funNames.length) {
            let funName = funNames[_nextIndex]
            // console.log('[autoRun] funName:', funName)
            this[funName]()
            this.runFunction(_nextIndex += 1)
          }
        }, 200)
      },
      autoLogin() {
        let username = 'admin'
        let password = '123'
        Login.remoteLogin({
          'username': username,
          'password': password
        }).then(data => {
          if (data.success) {
            // callBack()
            // window.sessionStorage.setItem('access_token', data.access_token)
            // this.setAccessToken(data.access_token)
            window.sessionStorage.setItem('access_token', data.access_token)
            window.sessionStorage.setItem('user_token', data.user.token)
            // 在缓存中记录最后登录时间，处理单用户登录需求
            // let now = new Date().getTime()
            // this.$KalixCatch._saveLocal('lastLoginTime', now)
            // this.$KalixCatch.save('lastLoginTime', now)
          } else {
            // this.$KalixMessage.error(data.message)
          }
        }).catch(err => {
          console.log('err', err)
        })
      },
      /**
       * 推荐管理
       */
      getHotlistsAll() {
        console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
        // let UrL = 'http://localhost:8181'
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/hotlistsCourses/getHotlistsAllData',
          params: {}
        }).then(res => {
          // eslint-disable-next-line
          res = eval("(" + res.data + ")")
          this.hcDataone = res.hcData[0]
          this.hcDatatwo = res.hcData[1]
          this.hcDatathree = res.hcData[2]
          this.htData = res.htData
          this.scData = res.scData
          this.scDataOne = res.scData[0]
          this.hotTeaData = res.hotTeaData
        })
      },
      /**
       * 课程排行
       */
      getCourseAll() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/course/getCourseVideo',
          params: {}
        }).then(res => {
          this.CVData = res.data.data
          this.CVDataOne = res.data.data[0]
          this.CVDataTwo = res.data.data[1]
          this.CVDataThree = res.data.data[2]
        })
      },
      /**
       * 轮播图
       **/
      getImgAll() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/imgss/getImgByType',
          params: {
            'type': '首页'
          }
        }).then(res => {
          this.slides = res.data.data[0].imgUrl.split(',')
        })
      },
      /**
       * 院系级联
       */
      getAllDep() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/departments/getAllDepByParentId',
          params: {
            'parentId': -1
          }
        }).then(res => {
          this.depData = res.data.children
        })
      },
      /**
       * 课程排行的跳转
       */
      details(item) {
        this.$router.push({name: 'VideoPage', params: {id: item.id}})
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  article
    width 1200px
    margin 20px auto

  .art1
    width 100%
    height 450px
    box-shadow 0px 5px 10px #ddd
    border-radius 10px
    overflow hidden
    position relative

  .art1_left
    width 250px
    height 450px
    float left
    border-radius 10px 0 0 10px
    box-shadow 0px 5px 10px #ddd
    background-color #2B333B
    overflow hidden

  .art1_left ul
    padding-top 30px

  .art1_left ul li
    height 50px
    line-height 50px
    padding 0 50px
    color #999
    cursor pointer
    font-weight bold
    font-size 18px

  /*.art1_left li:hover*/
    /*background-color #999*/

  .titleColor
    color #999

  .erjiBox-l
    position absolute
    left 250px
    top 0
    width 230px
    height 390px
    /*border-radius 0 10px 10px 0*/
    background-color #eee
    z-index 999
    padding 30px
    overflow hidden

  .erjiBox-l .erjiTitle
    position absolute
    padding 0 20px
    background-color #eee
    z-index 1
    color #019B45
    font-size 18px
    font-weight bold
    top 20px
    left 10px

  .erjiBox-r
    position absolute
    left 538px
    top 0
    width 230px
    height 390px
    border-radius 0 10px 10px 0
    /*border-left 1px solid black*/
    background-color #fff
    z-index 999
    padding 30px

  .erjiTitle
    position absolute
    padding 0 20px
    background-color #fff
    z-index 1
    color #019B45
    font-size 18px
    font-weight bold
    top 20px
    left 10px

  .erjiLine
    position absolute
    top: 28px
    left 120px
    border-top 2px solid #696969
    width 50%
    height 1px

  .erjiContent
    position absolute
    width 100%
    padding 20px 0
    top 40px

  .erjiContent a
    width 89%
    padding 10px 0
    cursor pointer
    /*border 1px solid red*/
    display block

  .art1_right
    width 950px
    height 450px
    float left
    border-radius 10px 0 0 10px
    box-shadow 3px 0px 10px #ddd

  .zonghe
    width 100%
    height 390px
    margin-top 38px

  /* 左侧排行 */
  .zonghe-left
    width 67.5%
    height 100%
    background-color #E6F4F5
    border-radius 5px
    float left
    position: relative

  /* 右侧热门 */
  .zonghe-right
    width 30%
    height 100%
    float right

  .kecheng
    margin-top 18px
    margin-bottom 22px
    font-size 24px
    letter-spacing 10px

  .tuijian
    color #008F95

  .paihang
    margin-top 18px
    font-size 24px
    letter-spacing 10px
    margin-left 20px

  .paihangbangTitle
    width 208px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .paihangbang ul
    margin-top 4px

  .paihangbang li
    margin 0 18px
    display flex
    font-size 14px
    height 30px
    line-height 30px

  .paihangbang span
    display inline-block
    width 138px
    text-align center

  .length
    display inline-block
    width 24px
    text-align center

  .huise
    color #A2A4BE

  .xuefen
    color #E24E42

  .renshu
    color #33B3F8

  .diyi
    width 24px
    height 30px
    background url("/static/Index/u470.png") no-repeat
    background-size 100%
    line-height 26px

  .dier
    width 24px
    height 30px
    background url("/static/Index/u468.png") no-repeat
    background-size 100%
    line-height 26px

  .disan
    width 24px
    height 30px
    background url("/static/Index/u466.png") no-repeat
    background-size 100%
    line-height 26px

  /*右侧内容*/
  .remen1
    width 360px
    height 200px
    position relative

  .remen1 img
    width 100%
    height 100%
    border-radius 10px

  .remen1 a
    width 100%
    height 100%

  .remen1 span img
    position absolute
    left -25px
    top -19px
    width 50px
    height 40px
    transform rotate(315deg)

  .remen1 .mingcheng
    position absolute
    left 0
    bottom 0
    width 100%
    height 40px
    background-color rgba(0, 0, 0, 0.4)
    line-height 40px
    padding-left 15px
    color #fff
    box-sizing border-box
    border-radius 0 0 5px 5px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .remen2
    width 100%
    height 100px
    margin-top 13px

  .remen2-1
    display inline-block
    /*float left*/
    width 175px
    height 100px
    margin-right 10px
    position relative

  .remen2-1 img
    width 100%
    height 100%
    border-radius 5px

  .remen2-2
    display inline-block
    /*float right*/
    width 175px
    height 100px
    position relative

  .remen2-2 img
    width 100%
    height 100%
    border-radius 5px

  .remen2 .mingcheng
    position absolute
    left 0
    bottom 0
    width 100%
    height 24px
    background-color rgba(0, 0, 0, 0.4)
    line-height 24px
    padding-left 15px
    color #fff
    box-sizing border-box
    font-size 14px
    border-radius 0 0 5px 5px

  .slider-show
    width 100%
    height 100%

  //推荐课程
  .tuijian-box
    margin-top 50px

  .recommended
    width 1200px
    height 450px
    box-shadow 4px 4px 6px #ccc
    border-radius 5px

  .img-1
    wigth 540px
    height 100%
    float left
    position: relative
    overflow hidden

  .img-title
    position: absolute
    left -28px
    top 16px
    width 110px
    height 22px
    line-height 22px
    background-color: #33A2FB
    transform rotate(-43deg)
    font-size 12px
    text-align center
    color #fff
    font-weight 700

  .img-1 img
    width 540px
    height 321px
    border-radius 5px

  .img-2
    float left
    width 330px
    height 321px
    position: relative
    overflow hidden

  .img-2 img
    display block
    width 100%
    height 187px

  .course
    width 100%
    height 130px

  .course p
    margin 18px 0

  .course-name
    font-weight 700

  .course-jianjie
    width 540px
    font-size 14px
    font-family "微软雅黑"
    display block /*内联对象需加*/
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .courses
    width 270px
    height 130px
    margin-left 18px

  .courses p
    margin 18px 0

  .courses-name
    font-weight 700

  .courses-jianjie
    font-size 14px
    font-family "微软雅黑"
    display block /*内联对象需加*/
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  //精选课程
  .jingxuan-box
    margin-top 50px

  .select
    width 1200px

  .select ul
    width 100%
    display flex
    justify-content space-between

  .select-video
    display block
    position: relative
    width 135px
    height 83px

  .select-video img
    width 135px
    height 83px
    border-radius 4px

  .pingfen
    position: absolute
    left 80px
    top 58px
    width 48px
    height 18px
    line-height 18px
    background-color: rgba(0, 0, 0, 0.4)
    font-size 12px
    color #fff
    border-radius 10px
    box-sizing border-box
    text-align center

  .select-name
    display inline-block
    width 135px
    height 44px
    line-height 44px
    box-sizing border-box
    font-weight 700
    text-align center
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  /*精选部分*/
  .boutique
    width 1200px
    height 396px
    margin-top 50px

  .boutique-left
    width 600px
    height 350px
    float left

  .boutique-son
    width 600px
    height 350px
    position: relative
    overflow hidden

  .boutique-son img
    width 600px
    height 350px
    border-radius 4px

  /*授课教师*/
  .boutique-sk
    position absolute
    left 408px
    top 324px
    width 60px
    height 18px
    line-height 18px
    text-align center
    background-color: rgba(0, 0, 0, 0.4)
    font-size 12px
    color #fff
    border-radius 10px

  /*课时*/
  .boutique-ks
    position absolute
    left 480px
    top 324px
    width 50px
    height 18px
    line-height 18px
    text-align center
    background-color: rgba(0, 0, 0, 0.4)
    font-size 12px
    color #fff
    border-radius 10px

  /*评分*/
  .boutique-xf
    position absolute
    left 544px
    top 324px
    width 40px
    height 18px
    line-height 18px
    text-align center
    background-color: rgba(0, 0, 0, 0.4)
    font-size 12px
    color #fff
    border-radius 10px

  /*精品*/
  .boutique-jp
    position: absolute
    left -28px
    top 16px
    width 110px
    height 22px
    line-height 22px
    background-color: #33A2FB
    transform rotate(-43deg)
    font-size 12px
    text-align center
    color #fff
    font-weight 700

  .boutique-right
    width 530px
    height 100%
    float right

  .boutique-right p
    margin 24px 0
    font-weight 700

  .boutique-right span
    color #9999B2
    font-size 16px

  .boutique-right-name
    font-size 18px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  /*分割器*/
  .slicer
    width 100%
    height 4px
    box-shadow 0 4px 6px #ccc

  .teacher
    wight 1200px
    height 500px
    margin-top 65px
    margin-bottom 36px

  .teacher-left
    width 67.5%
    height 100%
    float left

  .teacher-right
    width 30%
    height 100%
    float right

  .teacher-title
    margin-bottom 22px

  .teacher-title span
    font-size 22px
    letter-spacing 10px

  .green
    color: #008f95

  .teacher-head
    width 130px
    height 160px

  .teacher-ul
    display flex
    flex-wrap wrap
    justify-content space-around
    align-content space-around

  .teacher-li
    padding 0 5px
    margin-bottom 24px

  .teacher-box
    width 130px
    height 130px

  .teacher-son img
    width 130px
    height 130px
    border-radius 50%

  .teacher-box p
    width 100%
    height 30px
    line-height 30px
    text-align center
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .kecheng-name1
    width 100%
    height 110px
    background-color #FDF7E6
    border-radius 5px
    overflow hidden
    margin-bottom 20px
    z-index -1

  .kecheng-name1 a
    display block
    width 100%
    height 100%

  .kecheng-name1 .kecheng-img
    float left

  .kecheng-img img
    width 110px
    height 110px
    border-radius 4px

  /*display inline-block*/
  .kecheng-right
    float: left
    margin-left: 15px
    padding-top 16px
    width 235px

  .kecheng-name1 .kecheng-right p
    margin 0
    margin-bottom 14px

  .tl
    font-size 18px

  .tt
    font-size 14px
    color #99A4B8
    // display block /*内联对象需加*/
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .te
    margin-left 16px

  .boot-paging
    border none
    margin-left 166px

  .acolor
    color #999

  .titleFa
    margin-top 15px
    padding 0 18px
    box-sizing border-box

  .shi
    display inline-block
    width 130px
    text-align center

  .titleFaNa
    display inline-block
    width 180px
    margin-left 26px

  .titleFaSk
    display inline-block
    width 138px
    text-align center
  .titleFaKs
    display inline-block
    width 127px
    text-align center
  .titleFaXf
    display inline-block
    width 148px
    text-align center
  .titleFaXx
    display inline-block
    width 132px
    text-align center
</style>
